<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天气案例-监视属性</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
      监视属性 watch
        当被监视的属性变化时，回调函数自动调用，进行相关操作
        监视的属性必须存在才能进行监视
        监视的两种写法：
            new Vue 时传入 watch 配置
            通过 vm.$watch 监视
    -->
    <!-- 准备一个容器 -->
    <div id="root">
			<h1>今天天气很{{weather}}</h1> 
			<button @click="changeWeather">切换天气</button>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示

    const vm = new Vue({
			el: '#root',
			data: {
				isHot: true,
			},
			computed:{
				weather(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot;
				}
			},
			/*watch:{
				isHot:{
					immediate:true, // 初始化时让 handler 调用一次
					// handler 当 isHot 发生变化的时候就调用一次
					handler(newValue, oldValue){
						console.log('isHot被修改了', newValue, oldValue)
					},
          // 当监视属性中只有一个 handler 函数时，可以简写
          isHot(newValue, oldValue){
		        console.log('isHot被修改了', newValue, oldValue) 
	        }
				}
			}*/
    })
/*	vm.$watch('isHot', {
		immediate:true, // 初始化时让 handler 调用一次
		// handler 当 isHot 发生变化的时候就调用一次
		handler(newValue, oldValue){
			console.log('isHot被修改了', newValue, oldValue)
		}
	})*/
  // 当监视属性中只有一个 handler 函数时，可以简写
  vm.$watch('isHot', function(newValue, oldValue){
		console.log('isHot被修改了', newValue, oldValue) 
	})
</script>
</html>
